<template>
  <header>
    <div class="top">
      <div class="w clearfix">
        <coin-price class="fl"/>
        <nav class="fr">
          <ul class="clearfix">
            <li class="fl pointer">
              <el-popover
                placement="bottom"
                width="200"
                trigger="click">
                <img :src="require('@/assets/images/QR-code/download-app.png')" alt="">
                <span slot="reference">{{$t('header.down_app')}}</span>
              </el-popover>
            </li>
            <li class="fl"><a :href="preHelpHref +'/articles/360018556872'" target="_blank">{{$t('header.contactus')}}</a></li>
            <li class="fl" v-if="!obAccessKey && id"><router-link to="/wallet/walletlist">{{$t('header.userCenter')}}</router-link></li>
            <li class="fl no-hover">|</li>
            <template v-if="obAccessKey">
              <li class="fl obname"><router-link :to="'/pools/dashboard?access_key='+obAccessKey"><span class="name">{{obName+'('+$t('header.observer')+')'}}</span> <span class="cointype"><i class="icon" :class="'icon-' + subCoinType"></i>{{subCoinType.toUpperCase()}}</span></router-link></li>
              <li class="fl pointer" @click="exitObserver">{{$t('header.logout')}}</li>
            </template>
            <template v-else-if="!id">
              <li class="fl"><router-link to="/login">{{$t('header.login')}}</router-link></li>
              <li class="fl"><router-link to="/register">{{$t('header.register')}}</router-link></li>
            </template>
            <template v-else>
              <li class="fl no-hover">
                <account-select/>
              </li>
              <li class="fl no-hover">|</li>
            </template>
            <li class="fl no-hover">
              <lang-select/>
            </li>
          </ul>
        </nav>
      </div>
    </div>
    <div class="main">
      <div class="w clearfix">
        <router-link :to="obAccessKey?'/pools/dashboard':'/'" class="logo fl"></router-link>
        <nav class="fr">
          <ul class="clearfix">
            <li class="fl" v-for="(a, i) in nav" :key="i">
              <router-link :to="a.to" :exact="a.to === '/'">{{a.title}}</router-link>
            </li>
            <li class="fl"><a :href="preHelpHref+'/categories/360000937692'" target="_blank">{{$t('header.nav.notice')}}</a></li>
            <li class="fl"><a :href="preHelpHref" target="_blank">{{$t('header.nav.help')}}</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </header>
</template>
<script>

import { mapGetters, mapActions } from 'vuex';
import coinPrice from './coinPrice';
import langSelect from './langSelect';
import accountSelect from './accountSelect';


export default {
  name: 'newHeader',
  components: {
    coinPrice,
    langSelect,
    accountSelect,
  },
  computed: {
    ...mapGetters(['obAccessKey', 'obName', 'id', 'type', 'subCoinType', 'language']),
    preHelpHref() {
      return `https://support.dpool.top/hc/${this.language === 'zh' ? 'zh-cn' : 'en-us'}`;
    },
    nav() {
      if (this.obAccessKey) {
        return [
          {
            to: '/pools',
            title: this.$t('header.nav.dashboard'),
          },
          {
            to: '/statistics',
            title: this.$t('header.nav.statistics'),
          },
        ];
      } else if (this.id) {
        if (this.type === 3) {
          return [
            {
              to: '/',
              title: this.$t('header.nav.home'),
            },
            {
              to: '/hrt/home',
              title: this.$t('header.nav.hrt'),
            },
            {
              to: '/pools',
              title: this.$t('header.nav.dashboard'),
            },
            {
              to: '/statistics',
              title: this.$t('header.nav.statistics'),
            },
            {
              to: '/invite',
              title: this.$t('header.nav.invite'),
            },
          ];
        }
        return [
          {
            to: '/',
            title: this.$t('header.nav.home'),
          },
          {
            to: '/hrt/home',
            title: this.$t('header.nav.hrt'),
          },
          {
            to: '/pools',
            title: this.$t('header.nav.dashboard'),
          },
          {
            to: '/statistics',
            title: this.$t('header.nav.statistics'),
          },
        ];
      }
      return [
        {
          to: '/',
          title: this.$t('header.nav.home'),
        },
        {
          to: '/hrt/home',
          title: this.$t('header.nav.hrt'),
        },
        {
          to: '/statistics',
          title: this.$t('header.nav.statistics'),
        },
      ];
    },
  },
  methods: {
    ...mapActions(['SET_OB_ACCESS_KEY', 'SET_OB_NAME']),
    exitObserver() {
      this.SET_OB_ACCESS_KEY(undefined);
      this.SET_OB_NAME(undefined);
      window.location.href = '/';
    },
  },
};
</script>
<style lang="scss" scoped>
header{
  background-color: #fff;
  box-shadow: 0 0 5px 0 rgba(0,0,0,.05);
  border-bottom: 1px solid #e0e0e0;
  width: 100%;
  min-width: 1200px;
  &.header-home {
    background-color: transparent;
    box-shadow: none;
    border-bottom: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    .top{
      background-color: rgba(0, 0, 0, 0.5);
    }
    .main{
      .logo{
        background: url(../../assets/images/logo/header-home.png) no-repeat;
        &:hover{
          background: url(../../assets/images/logo/footer-home.png) no-repeat;
        }
      }
      nav{
        li{
          a{
            color: #fff;
            &:hover, &.router-link-active{
              color: #1dd3ad;
            }
          }
        }
      }
    }
  }
  .top{
    height: 40px;
    line-height: 40px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    background-color: #333;
    nav{
      ul{
        li{
          margin-right: 20px;
          &:hover{
            &.no-hover{
              color: rgba(255, 255, 255, 0.5);
            }
            color: #fff;
            a{
              color: #fff;
            }
          }
          &.obname{
            .name{
              margin-right: 20px;
            }
            .cointype{
              .icon{
                vertical-align: top;
                margin-top: 14px;
                margin-right: 5px;
                width: 12px;
                height: 12px;
                display: inline-block;
                background-size: auto 100%;
                background-position: center;
                background-repeat:  no-repeat;
                @each $coinType in btc,bch,bsv,eth,dcr,etp{
                  &.icon-#{$coinType}{
                    background-image: url(../../assets/images/home/icon-#{$coinType}.png);
                  }
                }
              }
            }
          }
          a{
            color: rgba(255, 255, 255, 0.5);
          }
          &:last-of-type{
            margin-right: 0;
          }
        }
      }
    }
  }
  .main{
    height: 100px;
    >.w{
      overflow: hidden;
    }
    .logo{
      margin: 30px 0 30px 40px;
      width: 106px;
      height: 40px;
      background: url(../../assets/images/logo/logo.png) no-repeat;
    }
    nav{
      margin: 30px 40px 30px 0;
      font-size: 18px;
      line-height: 40px;
      li{
        margin-right: 80px;
        &:last-of-type{
          margin-right: 0;
        }
        a{
          color: #333;
          &:hover, &.router-link-active{
            color: #70c1b3;
          }
        }
      }
    }
  }
}
</style>

